/* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; }
li.bjqs-slide{position:absolute; }
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;width:45px;height:45px;background-color:rgba(180,180,180,0.5);}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;background-image:url('../../image/next.png');}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;background-image:url('../../image/pre.png');}
ol.bjqs-markers{list-style: none; padding: 0; width:100%;}
ol.bjqs-markers.h-centered{}
ol.bjqs-markers li{display:block;float: left;}

p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

/* Demo CSS - You do not need this css in your own slider */

pre{
    font-family: "Source Code Pro", monospace;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: whiteSmoke;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

pre + h2{
    margin-top: 80px;
}

#container{
    max-width:600px;
    margin:0 auto;
    padding-bottom:80px;
}

#banner-fade,
#banner-slide{
    margin-bottom: 60px;
}

ul.bjqs-controls.v-centered li a{
    display:block;
    padding:10px;
    color:#000;
    text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
    background-color:rgba(0,0,0,0.8);
    color:#fff;
}
ol.bjqs-markers li a{
    display: block;
    position:relative;
    width:34px;
    height:34px;
    color:#fff;
    margin:5px;
    text-decoration: none;
    box-shadow: 0 0 10px #999;
    -moz-box-shadow: 0 0 10px #999;
    -webkit-box-shadow: 0 0 10px #999;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}
ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
    background: #333;
}

p.bjqs-caption{
    background: rgba(255,255,255,0.5);
}
.bjqs-slide{
    text-align: center;
    line-height: 300px;
    vertical-align: middle;
}
.bjqs-slide img{
    max-width: 600px;
    max-height: 300px;
    vertical-align: middle;
}
#banner-fade{
    box-shadow: 0 0 10px #CCC;
    -moz-box-shadow: 0 0 10px #CCC;
    -webkit-box-shadow: 0 0 10px #CCC;
    position:relative;
    background-color:#FFF;
}
.bjqs-wrapper{
    
}
.bjqs-markers{
    
}
.bjqs-markers li img{
    width:24px;
    height:24px;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    position:absolute;
    top:5px;
    left:5px;
}
/** Hieu ung thumbnai
.bjqs-markers li img:hover{
    width:60px;
    height:60px;
    left:-20px;
    top:-20px;
    border-radius: 100px;
    border:5px solid rgba(255,255,255,0.5);
    z-index:99;
    box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
}
.active-marker img{
    width:60px !important;
    height:60px !important;
    left:-20px !important;
    top:-20px !important;
    border-radius: 100px;
    border:5px solid rgba(255,255,255,0.5) !important;
    z-index:99 !important;
    box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
}
*/

#banner-fade::before,#banner-fade::after{
    border-radius: 10px / 90px;
    bottom: 25px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.7);
    content: '';
    height: 20%;
    left: 0px;
    position: absolute;
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    width: 45%;
    z-index: -2;
}
#banner-fade::after{
    left:auto;
    right: 5px;
    transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}